<template>
    <div class="circle-charts-container" :id="id"></div>
</template>

<script>
import { defineComponent, toRefs, reactive, onMounted } from "vue";
import Echarts from '@/util/echarts'

export default defineComponent({
    props: {
        titleText: {
            type: String,
            default: "",
        },
        seriesData: {
            type: Array,
            default: () => [],
        },
        id: {
            type: String,
            default: "circleCharts",
        },
    },
    setup(props) {
        const state = reactive({
            option: {
                title: [
                    {
                        text: props.titleText,
                        x: "center",
                        top: "40%",
                        textStyle: {
                            fontSize: "30",
                            color: "#6eecee",
                            fontFamily: "Lato",
                            fontWeight: "600",
                        },
                    },
                ],
                polar: {
                    radius: ["44%", "50%"],
                    center: ["50%", "50%"],
                },
                angleAxis: {
                    max: 100,
                    show: false,
                },
                radiusAxis: {
                    type: "category",
                    show: true,
                },
                series: [
                    {
                        type: "bar",
                        roundCap: true,
                        barWidth: 60,
                        showBackground: true,
                        backgroundStyle: {
                            color: "#fff",
                        },
                        data: props.seriesData,
                        coordinateSystem: "polar",
                        itemStyle: {
                            color: "#6eecee",
                        },
                    },
                ],
            },
        });
        const initCharts = () => {
            let circleCharts = echarts.init(document.getElementById(props.id));
            circleCharts.setOption(state.option, true);
        };
        onMounted(() => {
            initCharts();
        });
        return {
            ...toRefs(state),
        };
    },
});
</script>

<style lang="scss" scoped>
.circle-charts-container {
    width: 200px;
    height: 200px;
}
</style>
